import React, { Component } from 'react';
import { observer, inject } from "mobx-react";
import styles from './index.module.less';
import TaskInfo from './taskInfo';
import TaskRemind from './taskRemind';
import TaskMember from './taskMember';
import TaskMaterial from './taskMaterial'
import IF from '../../components/If';
import CloseBar from '../../components/CloseBar';
import SideContainer from '../common/sideRender/sideContainer';
import BannerTips from '../../components/BannerTips';

export function TaskDetailContent(props) {
    const {
        col = 2, isShowInSlider,
        detailData, repeatList, aheadList,
        saveinfo, alarmTaskList, saveRemind, manageMember, deleteFiles, complete, restart
    } = props;
    return (
        <div className={styles.detailContent} key={detailData.info.recid}>
            <TaskInfo col={col} detailData={detailData} save={saveinfo} alarmTaskList={alarmTaskList} complete={complete} restart={restart} />
            <TaskRemind detailData={detailData} save={saveRemind} repeatList={repeatList} aheadList={aheadList} />
            <TaskMember detailData={detailData} manageMember={manageMember} isShowInSlider={isShowInSlider} />
            <TaskMaterial col={col} detailData={detailData} deleteFiles={deleteFiles} isShowInSlider={isShowInSlider} />
        </div>
    )

}

@inject(({ taskState, commonState }) => ({ taskState, commonState }))
@observer
class TaskDetail extends Component {

    render() {
        const { taskState, commonState, bannerTips } = this.props;
        const { detailData, repeatList, aheadList,
            saveinfo, saveRemind, manageMember, deleteFiles, alarmTaskList, complete, restart
        } = taskState;
        return (
            <div className={styles.wrapDetail}>
                <div className={styles.detail}>
                    <div className={styles.detailHeader}>
                        {commonState.sideOpen ? null : <CloseBar />}
                    </div>
                    <BannerTips
                        show={!!bannerTips}
                        autoplay={!!(bannerTips && bannerTips.tips)}
                        type={bannerTips && bannerTips.type}
                        message={bannerTips && bannerTips.message}
                        tips={bannerTips && bannerTips.tips}
                    />
                    <IF condition={detailData}>
                        <TaskDetailContent
                            detailData={detailData}
                            saveinfo={saveinfo}
                            alarmTaskList={alarmTaskList}
                            saveRemind={saveRemind}
                            repeatList={repeatList}
                            aheadList={aheadList}
                            manageMember={manageMember}
                            deleteFiles={deleteFiles}
                            complete={complete}
                            restart={restart}
                        />
                    </IF>
                </div>
                <SideContainer
                    showContent={!!detailData}
                    type={3}
                    sideOpen={commonState.sideOpen}
                    commonState={commonState}
                />
            </div>
        );
    }
}

export default TaskDetail